<template>
	<view class="content">
		<view class="title" style="font-weight: bold; color: #1e2232">{{ title1 }}</view>
		<view class="box1">
			<view class="box1_userMsg">
				<view>
					<image src="../../static/student/user.png" style="width: 96rpx; height: 96rpx;margin-top:52rpx"></image>
				</view>
				<view style="display: flex; flex-direction: column;margin-top:63rpx;margin-left:30rpx">
					<view class="title" style="font-weight: 700; color: #ffffff;margin-bottom: 20rpx;">学生姓名</view>
					<view style="font-family: Alibaba PuHuiTi; font-weight: 400; font-size: 28rpx; color: #ffffff;">电话号码</view>
				</view>
			</view>
			<view class="box1_exit" @click="exit()">退出</view>
		</view>
		<view class="title font">{{ title2 }}</view>
		<view class="box2">
			<scroll-view :scroll-x="true" class="box2_scroll">
				<view v-for="(item, index) in 5" :key="index" class="box2_course" >
					<view style="padding-left: 21rpx; padding-top: 35rpx">
						<p style="font-size: 28rpx" class="font">课程名称</p>
						<span style="color: #a6a7a8; font-size: 24rpx">
							余
							<span style="color: #1dbf7f">14</span>
							/20
						</span>
					</view>
					<view>
						<image src="../../static/student/book.png" style="width: 135rpx; height: 135rpx; margin-left: 80rpx"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="title font">{{ title3 }}</view>
		<view class="box3">
			<scroll-view :scroll-y="true" style="width: 100%">
				<view v-for="(item, index) in 6" :key="index" class="box3_list">
					<view style="display: flex; height: 80rpx">
						<view>
							<image src="../../static/student/book2.png" style="width: 80rpx; height: 80rpx"></image>
						</view>
						<view class="box3_list_courseMsg">
							<view class="title font">课程名称</view>
							<view>扣课时间：2022-08-17 14:27:30</view>
						</view>
					</view>
					<view class="title font" style="line-height: 80rpx">-1</view>
				</view>
			</scroll-view>
<!-- 			<z-paging :paging-style="{ height: '50vh' }" default-page-no="1" default-page-size="10" ref="paging" v-model="dataList" @query="queryList">
				<view v-for="(item, index) in dataList" :key="index" class="box3_list">
					<view style="display: flex; height: 80rpx">
						<view>
							<image src="../../static/student/book2.png" style="width: 80rpx; height: 80rpx"></image>
						</view>
						<view class="box3_list_courseMsg">
							<view class="title font">课程名称</view>
							<view>扣课时间：2022-08-17 14:27:30</view>
						</view>
					</view>
					<view class="title font" style="line-height: 80rpx">-1</view>
				</view>
			</z-paging> -->
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const title1 = ref('优诗美文');
const title2 = ref('学习课程');
const title3 = ref('变动记录');
const dataList = ref([])

//获取记录列表
const queryList = (pageNo, pageSize) => {
	let params = {
		pageNum: pageNo,
		pageSize: pageSize,
		mid: uni.getStorageSync('mid')
	};
	trendslist(params)
		.then((res) => {
			if (res.code == 200) {
				const list = res.rows;
				if (otid.value) {
					console.log(otid.value);
					const item = res.rows.find((p) => p.tid == otid.value);
					console.log(item);
					list.unshift(item);
				}
				paging.value.complete(list);
			}
		})
		.catch((res) => {
			paging.value.complete(false);
		});
};

//退出登录
const exit = () =>{
	wx.navigateTo({
	  url: "/pages/Login/index",
	});
}
</script>

<style scoped lang="scss">
.content {
	padding: 0rpx 30rpx;
	padding-top: 117rpx;
}
.title {
	font-family: Alibaba PuHuiTi;
	font-size: 36rpx;
	line-height: 16rpx;
}
.font {
	font-weight: 700;
	color: #333333;
}
.box1 {
	background: linear-gradient(90deg, #1cbe7e, #61d9ab);
	border-radius: 20rpx;
	width: 690rpx;
	height: 200rpx;
	margin: 63rpx 0rpx;
	display: flex;
	justify-content: space-between;
	}
.box1_userMsg{
	display: flex;
	margin-left: 50rpx;
}
.box1_exit {
	border: 1px solid white;
	color: #ffffff;
	font-size: 24rpx;
	width: 90rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align:center;
	margin-top: 76rpx;
	margin-right: 40rpx;
	}
.box2 {
	margin: 30rpx 0px 60rpx 0px;
}
.box2_scroll {
	width: 100%;
	white-space: nowrap;
	.box2_course {
		display: inline-block;
		margin-right: 23rpx;
		background: #f4f6f8;
		border-radius: 20rpx;
		width: 215rpx;
		height: 250rpx;
	}
}
.box3 {
	margin-top: 70rpx;
}
.box3_list {
	height: 120rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-bottom: 1px solid #ebebeb;
	margin-bottom: 40rpx;
}
.box3_list_courseMsg{
	margin-left: 15rpx; 
	height: 80rpx; 
	padding-top: 10rpx;
	view:first-child{
		margin-bottom: 20rpx
	}
	view:last-child{
		font-size: 24rpx; 
		color: #819093
	}
}
</style>
